Semántica en HTML

¿Qué es la Semántica en HTML?

La semántica en HTML se refiere al uso adecuado de las etiquetas HTML para describir el contenido de manera que tenga significado para los navegadores y otros dispositivos. Utilizar etiquetas semánticas mejora la accesibilidad y el SEO (optimización para motores de búsqueda) de una página web.

Etiquetas Semánticas Comunes

Tabla de etiquetas semánticas
Etiqueta	Descripción
<header>	Define un encabezado para un documento o sección.
<nav>	Define un conjunto de enlaces de navegación.
<main>	Representa el contenido principal del documento.
<article>	Define contenido independiente que podría ser distribuido de manera independiente.
<section>	Define una sección del contenido con un encabezado temático.
<aside>	Contenido relacionado con el contenido principal, como una barra lateral.
<footer>	Define un pie de página para un documento o sección.
<figure>	Se usa para contener contenido gráfico, como imágenes o diagramas.
<figcaption>	Proporciona una leyenda para el contenido dentro de <figure>.

Ejemplo de Uso de Etiquetas Semánticas

Ejemplo de Página Semántica

<header>
    <h1>Título Principal</h1>
    <nav>
        <ul>
            <li><a href="#home">Inicio</a></li>
            <li><a href="#about">Sobre</a></li>
            <li><a href="#contact">Contacto</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <article>
            <h2>Artículo Semántico</h2>
            <p>Este es un artículo que tiene significado independiente.</p>
        </article>
    </section>
</main>

<footer>
    <p>© 2024 Ejemplo de Semántica</p>
</footer>

Beneficios de la Semántica en HTML

Mejora la accesibilidad para lectores de pantalla.
Facilita el mantenimiento del código.
Ayuda a los motores de búsqueda a comprender mejor el contenido.
Promueve mejores prácticas en desarrollo web.

Ejemplo de Estructura Semántica Completa

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Página Semántica</title>
</head>
<body>
    <header>
        <h1>Mi Blog</h1>
        <nav>
            <ul>
                <li><a href="#articulos">Artículos</a></li>
                <li><a href="#sobre">Sobre mí</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="articulos">
            <article>
                <h2>Artículo 1</h2>
                <p>Contenido del primer artículo.</p>
            </article>
            <article>
                <h2>Artículo 2</h2>
                <p>Contenido del segundo artículo.</p>
            </article>
        </section>

        <aside>
            <h3>Información Adicional</h3>
            <p>Aquí puedes encontrar información relacionada.</p>
        </aside>
    </main>

    <footer>
        <p>© 2024 Mi Blog</p>
    </footer>
</body>
</html>

Errores Comunes en el Uso de Semántica

Usar etiquetas de presentación, como <b> y <i>, en lugar de etiquetas semánticas como <strong> y <em>.
Omitir etiquetas semánticas importantes como <header>, <footer> y <nav>.
Usar múltiples niveles de encabezados sin un orden lógico (por ejemplo, <h1>, luego <h3> directamente).
Colocar todo el contenido dentro de <div>, en lugar de usar etiquetas semánticas adecuadas.

Prácticas Recomendadas

Utilizar siempre etiquetas semánticas adecuadas para el tipo de contenido.
Organizar el contenido jerárquicamente utilizando encabezados de manera adecuada.
Comprobar la accesibilidad de tu sitio con herramientas de evaluación.
Hacer un uso responsable de las etiquetas <aside> y <section> para enriquecer el contenido sin redundancias.

Temario de Categorías

Etiquetas para Texto

Etiquetas para Listas

Etiquetas para Enlaces

Etiquetas para Tablas

Etiquetas para Formularios

Etiquetas para Incrustar Contenido

Etiquetas para Scripts y Estilos